<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <style>
      .swiper-container{
        width: 95%;
        border-radius: 10px;
        overflow: hidden;
        margin: 0 auto;
      }
      .swiper-slide{
        height: 200px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
      .main-container{
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      .main-container > div{
        width: 45%;
        height: 185px;
        margin-top: 20px;
        font-size: 25px;
        border-radius: 10px;
        color: #fff;
        margin-left: 19px;
      }
      .main-container > div:nth-child(n+1){
        background-color: #65afda;
      }
      .main-container > div{
        background-repeat: no-repeat;
        background-size: cover;
      }
      .main-container > div > div{
        position: relative;
        width: 100%;
        height: 100%;
      }
      .main-container > div > div > span{
        display: inline-block;
        font-weight: bolder;
        position: absolute;
        right: 20px;
        bottom: 25px;
      }
      .main-container > div:nth-child(1){
        background-image: url('../image/img_1.jpg');
      }
      .main-container > div:nth-child(2){
        background-image: url('../image/img_2.jpg');
      }
      .main-container > div:nth-child(3){
        background-image: url('../image/img_3.jpg');
      }
      .main-container > div:nth-child(4){
        background-image: url('../image/img_4.jpg');
      }
      .main-container > div:nth-child(5){
        background-image: url('../image/img_5.jpg');
      }
      .main-container > div:nth-child(6){
        background-image: url('../image/img_5.jpg');
      }
      .main-container > div:nth-child(1) > div{
        background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(255,74,1,0.50) 100%);
        border-radius: 8px;
      }
      .main-container > div:nth-child(2) > div{
        background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(22,255,96,0.50) 100%);
        border-radius: 8px;
      }
      .main-container > div:nth-child(3) > div{
        background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(114,72,255,0.50) 100%);
        border-radius: 8px;
      }
      .main-container > div:nth-child(4) > div{
        background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(229,255,15,0.50) 100%);
        border-radius: 8px;
      }
      .main-container > div:nth-child(5) > div{
        background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(255,163,22,0.50) 100%);
        border-radius: 8px;
      }
      .main-container > div:nth-child(6) > div{
        background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(255,163,22,0.50) 100%);
        border-radius: 8px;
      }
    </style>
</head>

<body>
    <main id="app">
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(bannerItem, index) in bannerList">
                <img :src="bannerItem">
              </div>
          </div>
          <div class="swiper-pagination"></div>
      </div>

      <div class="main-container">
        <div tapmode onclick="enterCabinPage()">
          <div>
            <span>氧舱治疗</span>
          </div>
        </div>
        <!-- <div tapmode onclick="enterMissionPage()">
          <div>
            <span>宣教管理</span>
          </div>
        </div> -->
        <div tapmode onclick="enterEvaluationPage()">
          <div>
            <span>患者详情</span>
          </div>
        </div>
        <div tapmode onclick="enterEquipmentManagePage()">
          <div>
            <span>设备巡检</span>
          </div>
        </div>
        <div tapmode onclick="enterRenewalContainerPage()">
          <div>
            <span>续费管理</span>
          </div>
        </div>
      </div>

    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../script/swiper.min.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
      var vm = new Vue({
        el: '#app',
        data: {
          bannerList: [
            '../image/banner_0.jpg',
            '../image/banner_1.jpg',
            '../image/banner_2.jpg',
            '../image/banner_3.jpg'
          ]
        }
      })

      var mySwiper = new Swiper('.swiper-container', {
        autoplay: 5000, //可选选项，自动滑动
        loop: true,
        el: 'swiper-pagination'
      })
    }

    // 患者评估
    function enterEvaluationPage() {
      api.openWin({
          name: 'evaluation',
          url: './evaluation.html',
          pageParam: {
              name: 'evaluation'
          }
      });
    }

    // 患者管理
    function enterEvaluationManagePage() {
      api.openWin({
          name: 'evaluation-manage-header',
          url: './evaluation-manage-header.html',
          pageParam: {
              name: 'evaluation-manage-header'
          }
      });
    }

    function enterCabinPage() {
      api.openWin({
          name: 'enterCabinPage',
          url: './cabin.html',
          pageParam: {
              name: 'cabin'
          }
      });
    }

    function enterMissionPage() {
      api.openWin({
          name: 'missionPage',
          url: './mission.html',
          pageParam: {
              name: 'mission'
          }
      });
    }

    function enterEquipmentManagePage() {
      api.openWin({
          name: 'equipment-manage-header',
          url: './equipment-manage-header.html',
          pageParam: {
              name: 'equipment-manage-header'
          }
      });
    }

    function enterRenewalContainerPage() {
      api.openWin({
          name: 'renewal-container-header',
          url: './renewal-container-header.html',
          pageParam: {
              name: 'renewal-container-header'
          }
      });
    }
</script>
